<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>bootstrap-newsWeb新闻详情页</title>
  <!-- 网站图标 -->
  <link rel="shortcut icon" href="../images/logo.png" type="image/x-icon" />

  <!-- ! bootstrap4基本所需css/js引入 -->
  <link rel="stylesheet" href="../lib/css/bootstrap.css">

  <!-- ! 在bootstarp库引入bootstrap.css后再引入自己写的css  就可以实现覆盖  因为html文档是从上往下读的 -->
  <link rel="stylesheet" href="../css/style.css">

  <!-- zico图标库引入 -->
  <link rel="stylesheet" href="../lib/css/zico.min.css">

  <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
  <script src="../lib/js/jquery-3.5.1.min.js"></script>

  <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
  <!-- ! popover提示框组件依赖 Popper.js 进行定位，在必须引入 popper.min.js 在bootstrap.js脚本之前，
          ! 或者使用bootstrap.bundle.min.js / bootstrap.bundle.js（这两个脚本中已经包含了Popper.js可以直接运行弹出提示框）
     -->
  <script src="../lib/js/bootstrap.bundle.js"></script>

  <!-- 自己的js文件 -->
  <script src="../js/include.js"></script>
  <script src="../js/main.js"></script>

</head>

<body>
  <!-- **********************************header区域 start********************************************* -->
  <div id="header"></div>
  <!-- **********************************header区域 end********************************************* -->

  <!-- **********************************新闻详情板块区域 start********************************************* -->
  <section id="cjNewDetails">
    <div class="container">
      <div class="row">
        <!-- 左侧新闻内容 -->
        <div class="col-lg-9">
          <!-- 新闻标题 -->
          <h1 class="cjNewsTitle"> 集聚强大的IT讲师资源，独特的课程</h1>
          <!-- 小标题 -->
          <div class="cjNewsStatus">25k阅读-35分钟前发布
            <!-- badge 图标，一般使用span 但是只要是badge，即便用div也会变成inline元素，而不是block，即变成 -->
            <span class="badge badge-secondary">情感</span>
            <div class="badge badge-secondary">教育</div>
          </div>
          <!-- 新闻内容 -->
          <div class="cjNewscontainer">
            <!-- Blockquote 来源备注与引用 -->
            <blockquote class="blockquote">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam libero nostrum corporis doloremque maxime
            </blockquote>
            voluptate in. Debitis, voluptates, rerum nisi consequuntur vel totam maxime modi quam quis, suscipit eveniet
            vitae!
            Eligendi assumenda temporibus consequatur soluta dicta ab quo unde molestiae mollitia esse. Fugit iure
            voluptatibus vitae! Odit fuga omnis iusto quisquam architecto ab optio reiciendis qui? Magnam corporis
            veniam commodi.
            Architecto nobis iusto eius nemo? Voluptatibus laudantium id voluptatem nemo, fuga natus doloribus quis nam
            quibusdam aperiam, autem odit, est dolore dolores ut velit eligendi molestiae sint perspiciatis vero?
            Consectetur.
            <div class="mt-3 mb-3 d-flex align-items-center justify-content-center bg-danger">
              <img src="../images/logo.png" alt="">
            </div>
            Culpa quae totam natus ex ut modi molestiae perferendis repellendus, hic animi eius. Cum quo aliquid,
            possimus natus alias voluptatem vitae nostrum, voluptatibus, debitis vel accusantium consectetur. Odit, est
            consequatur.
            Ea ab quos, vel qui est nostrum dolorem veniam expedita eum sit ratione explicabo tenetur quia atque. Sit
            porro voluptates eius consequatur sapiente nemo repellat, natus, fugit nam expedita velit.
            At quo ad ipsa illum, fuga labore dolores adipisci accusamus architecto, doloremque culpa numquam quod
            molestias dolorem repellendus quisquam consectetur aliquam voluptatum animi atque officiis? Provident ipsum
            fugiat qui cupiditate!
            Maiores, praesentium, velit repellendus repellat quas quisquam expedita, soluta impedit id repudiandae omnis
            assumenda! Itaque nemo distinctio fugiat ut! Eius dolores eum laudantium earum ratione maiores fugiat
            tempore ducimus vitae?
            Voluptatem dolore enim atque laboriosam earum eos perspiciatis optio natus molestias at eveniet iusto sequi
            nostrum modi facilis dicta reprehenderit minima temporibus consequatur esse placeat, dolorum quisquam
            dolorem! Eos, accusantium.
            Ad, adipisci quo? Mollitia similique atque iure doloremque alias reiciendis, quibusdam nam debitis aperiam
            beatae. Aliquid perferendis, in, illum aut quod, eligendi assumenda impedit incidunt quisquam vitae unde
            maxime nobis!
            Laudantium saepe enim sequi harum provident esse, adipisci perferendis, porro, placeat tenetur explicabo
            optio sunt? Nobis quas facere cupiditate ipsa veritatis accusamus delectus deleniti sit dolorum
            reprehenderit, enim maxime voluptas!
          </div>
        </div>
        <!-- 右侧相关推荐 -->
        <div class="col-lg-3">
          <div class="row bg-light">
            <!-- 因为col自带padding-left：15px padding-right：15px  这样看起来这些卡片不好看，所以强制清除这里的padding -->
            <div class="col pl-0 pr-0">
              <!--相关推荐的标题区域-->
              <div class="text-center mt-1 mb-1 ">
                <h2><strong>相关推荐</strong></h2>
              </div>
              <!-- 一个相关推荐内容 start -->
              <div class="card mb-3">
                <!-- 卡片内容 -->
                <div class="row no-gutters">
                  <!-- 左侧图标 -->
                  <div class="col-3  d-flex align-items-center">
                    <img src="../images/logo.png" class="card-img" alt="...">
                  </div>
                  <!-- 右侧内容 -->
                  <div class="col-9">
                    <div class="card-body">
                      <a href="#" class="cjSameNewsList">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text mb-0">This is a wider card </p>
                      </a>
                      <p class="card-text mb-0"><small class="text-muted">Last updated 3 mins ago</small></p>
                    </div>

                  </div>
                </div>
              </div>
              <!-- 一个相关推荐内容 end-->
              <!-- 一个相关推荐内容 start -->
              <div class="card mb-3">
                <!-- 卡片内容 -->
                <div class="row no-gutters">
                  <!-- 左侧图标 -->
                  <div class="col-3  d-flex align-items-center">
                    <img src="../images/logo.png" class="card-img" alt="...">
                  </div>
                  <!-- 右侧内容 -->
                  <div class="col-9">
                    <div class="card-body">
                      <a href="#" class="cjSameNewsList">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text mb-0">This is a wider card </p>
                      </a>
                      <p class="card-text mb-0"><small class="text-muted">Last updated 3 mins ago</small></p>
                    </div>

                  </div>
                </div>
              </div>
              <!-- 一个相关推荐内容 end-->

              <!-- 一个相关推荐内容(样式二) start -->
              <div class="list-group cjSameNewsList">
                <a href="#" class="list-group-item list-group-item-action">
                  <div class="row no-gutters">
                    <div class="col-3  d-flex align-items-center ">
                      <img src="../images/logo.png" class="card-img" alt="...">
                    </div>
                    <div class="col-9">
                      <h5 class="card-subtitle mb-1 ">Card subtitle</h5>
                      <p class="card-text mb-0 text-left">
                        集聚强大的IT讲师资源，独特的课程服务模式，通过M2O等新型教育方式。
                      </p>
                      <p class="card-text">
                        <small class="text-muted">
                          <span>1.5万游览</span>
                          <span>300评论</span>
                        </small>
                      </p>
                    </div>
                  </div>
                </a>
                <!-- 一个相关推荐内容(样式二) end -->

                <!-- 一个相关推荐内容(样式二) start -->
                <a href="#" class="list-group-item list-group-item-action">
                  <div class="row no-gutters">
                    <div class="col-3  d-flex align-items-center ">
                      <img src="../images/logo.png" class="card-img" alt="...">
                    </div>
                    <div class="col-9">
                      <h5 class="card-subtitle mb-1 ">Card subtitle</h5>
                      <p class="card-text mb-0 text-left">
                        集聚强大的IT讲师资源，独特的课程服务模式，通过M2O等新型教育方式。
                      </p>
                      <p class="card-text">
                        <small class="text-muted">
                          <span>1.5万游览</span>
                          <span>300评论</span>
                        </small>
                      </p>
                    </div>
                  </div>
                </a>
                <!-- 一个相关推荐内容(样式二) end -->

              </div>
            </div>
          </div>



          <!--24小时热点区域-->
          <div class="row bg-light mt-5 mb-5">
            <!-- 因为col自带padding-left：15px padding-right：15px  这样看起来这些卡片不好看，所以强制清除这里的padding -->
            <div class="col pl-0 pr-0">
              <div class="text-center mt-1 mb-1 ">
                <h2><strong>24小时热点</strong></h2>
              </div>
              <div class="list-group cjHotNewsList">
                <a href="#" class="list-group-item list-group-item-action">
                  <h5 class="card-subtitle mb-1 ">Card subtitle</h5>
                  <p class="card-text mb-0 text-left">
                    集聚强大的IT讲师资源，独特的课程服务模式，通过M2O等新型教育方式。
                  </p>
                  <p class="card-text">
                    <!-- class="text-muted" 这个文字设置为灰色 color被设置为灰色了，所以a标签:hove时的变色对它不起作用 -->
                    <small class="text-muted">
                      <span>1.5万游览</span>
                      <span>300评论</span>
                    </small>
                  </p>
                </a>
                <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>

              </div>
            </div>
          </div>

        </div>
      </div>
    </div>

  </section>
  <!-- **********************************新闻详情板块区域 end********************************************* -->

  <!-- **********************************footer start********************************************* -->
  <div id="footer"></div>
  <!-- **********************************footer end********************************************* -->


</body>

</html>